/*
 * Description: dom拖入容器后可再拖回
 * Author: wangyifei
 * DateCreated: 2024-04-12 09:55
 */

import { useEffect, useState } from 'react';
import { DndContext, type DragEndEvent, useDndContext } from '@dnd-kit/core';
import Draggable from './c-cpns/Draggable';
import Droppable from './c-cpns/Droppable';
import { Card } from 'antd';

const containers = ['A', 'B', 'C'];

const Detail002 = () => {
	const [parent, setParent] = useState(null);
	const draggableMarkup = <Draggable id="draggable">Drag me</Draggable>;

	// const dndContext = useDndContext();
	// useEffect(() => {
	// 	console.log(dndContext);
	// }, [dndContext]);

	const handleDragEnd = (event: DragEndEvent) => {
		const { over } = event;
		setParent(over ? over.id : null);
	};

	return (
		<Card>
			<DndContext onDragEnd={handleDragEnd}>
				{parent === null ? draggableMarkup : null}

				{containers.map((id) => (
					<Droppable key={id} id={id}>
						{parent === id ? draggableMarkup : 'Drop here'}
					</Droppable>
				))}
			</DndContext>
		</Card>
	);
};

export default Detail002;
